<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>网络检测报告</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <meta name="msapplication-tap-highlight" content="no">
    <style>
    	html{font-size:6px}
		body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
		    margin: 0;
		    padding: 0;
		}

		body {
			font-family: Helvetica;
		    background: #fff;
		    background-size:100%;
		    padding-bottom:3rem;
		}

		img {
		    border: 0;
		}

		li{
		    list-style: none
		}
		a{
			text-decoration: none;
		}
		.fl{
		    float:left;
		}

		.fr{
		    float:right;
		}
		.container {
		  width: 100%;
		  min-height: 100%;
		  height: auto !important;
		  background: #fff;
		}
		.load {
		  width: 100%;
		  text-align: center;
		  color: #7e7e7e;
		  height: auto !important;
		  background: #fff;
		}	
		.baseinfo {
		    margin: 0 1rem;
		    background: #fff;
		    padding-top: 1.833rem;
		}
		.infocenter {
		    width: 100%;
		    border: 1px solid #ddd;
		    padding-bottom: 1.5rem;
		}
		.info-title {
			height: 3.334rem;
		    color: #000;
		    background: #dce1e7;
		    font-size: 2.5rem;
		}
		.title-name {
			line-height: 3.334rem;
			margin-left: 1rem;
		}
		.info-content {
		    color: #000;
		    background: #fff;
		    
		}
		.info-content .resultname {
		    font-size: 2.5rem;
		    margin: 1rem;
		    line-height: 2.5rem;
		    padding-left: 2rem;
		    text-indent: -1.4rem;
		}
		.info-content .resultname  .dot{
    		margin-right: 1rem;    
    		color: #025692;
		}
		.info-content .resultname  .enword{
    		word-wrap: break-word;
    		overflow: hidden;
		}

		.info-content ul {
		    -webkit-padding-start: 1rem;
		}
		.info-content ul>li {
			list-style-type: none;
			line-height: 2.5rem;
			font-size: 2.166rem;
		}
		.info-content img {
		    width: 2rem;
		    height: 2rem;
		    text-align: center;
		    vertical-align: middle;
		}
		.info-content .tmsg {
		    margin: 0 1rem;
		    display: inline-block;
		    text-align: center;
		    color: #000;
			font-size: 2.1rem;
		}
		.info-content .msgdetil {
		    display: inline;
		    margin-right: 3rem;
		}
		.info-content a {
		    color: #0000FF;
		    text-decoration: underline;
		}
		.info-content .msgwarm {
		    color: #ef1e1e;
		}
		.info-content .n-table{
			border: #eee solid 1px;
			width: 98%;
			margin: auto;
			table-layout: fixed;
		}
		.info-content .noacceleration, .info-content .acceleration {
			font-size:2rem;
		} 
		.info-content .normal {
			color: #3cbd51;
		}
		.info-content .abnormal {
			color: #ed2e2e;
		}
		.info-content .noacce-title {
			text-align: left;
			line-height: 1.5rem;
			margin-bottom: 1rem;
			padding-left: 0.3rem;
			background: url(image/img5/bg3.png) no-repeat;
		}
		.info-content .acce-title {
			text-align: left;
			line-height: 1.5rem;
			color:#fff;
			padding-left: 0.3rem;
			margin: 1rem 0;
			background: url(image/img5/bg4.png) no-repeat;
		}
		.basecontent ul>li,.info-content .msg{
    		color: #7e7e7e;
		}
		.basecontent .imei{
    		color: #000;
		}
		.margl {
		    margin-left: 9rem;
		}
		table{
			text-align: center;
			border-collapse: collapse;
			border-spacing: 0;
		}
		table th{
			line-height:3.334rem;
			font-weight: 400;
		}
		table td{
			line-height: 2rem;
		} 
		.error_bg {
		    background: #f2f9ff;
		}
		.info-content .bcontent{
			width: 98%;
			margin: 1rem auto;
		}
		.bcontent .ti {
		    width: 2.5rem;
		    text-align:right;
		}
		.bcontent .cont {
		    width: 6rem;
		    text-align:left;
		}
		.bcontent .long {
		    width: 15rem;
		    text-align:left;
		}
		
		.msg_normal {
			color: #3cbd51;
			font-size: 2.1rem;
		}
		.msg_abnormal {
			color: #ed2e2e;
			font-size: 2.1rem;
		}
		
		.tb_item_bg_color_normal {
			background: #f2f9ff;
			color: #3cbd51;
		}
		.tb_item_bg_color_abnormal {
			background: #f2f9ff;
			color: #ed2e2e;
		}
		@media screen and (min-width:321px) and (max-width:375px){html{font-size:5.5px}}
		@media screen and (min-width:376px) and (max-width:414px){html{font-size:6px}}
		@media screen and (min-width:415px) and (max-width:639px){html{font-size:7.5px}}
		@media screen and (min-width:640px) and (max-width:719px){html{font-size:10px}}
		@media screen and (min-width:720px) and (max-width:749px){html{font-size:11.25px}}
		@media screen and (min-width:750px) and (max-width:799px){
			html{font-size:11.75px}
			.info-content .acce-title {
				color: #000;
			}
		}
		@media screen and (min-width:800px){html{font-size:12.5px}}		
    </style>
</head>
<body>
	
	<div class="load" ${load_display}>
		<img src="image/img5/loading.gif">
		<div>正在努力检测中，已完成${load_percent}%，请稍候...</div>
	</div>	

    <div class="container">
        <div class="baseinfo">
        	<div class="infocenter">
        		<div class="info-title">
					<div class="title-name">检测结果</div>
				</div>
				<div class="info-content">
					<div class="resultname"><span class="dot">•</span>${diagnosis_title}</div>
					${diagnosis_body}
				</div>
        	</div>
		</div>
		<div class="baseinfo">
        	<div class="infocenter">
        		<div class="info-title">
					<div class="title-name">手机信息</div>
				</div>
				<div class="info-content">
					<div class="basecontent">
						<div class="resultname"><span class="dot">•</span>手机网络</div>
						<ul>
							<li>
								<label>网络制式：</label>
								<span class="">${networktype}</span>
							</li>
						</ul>
					</div>
					<div class="basecontent">
						<div class="resultname"><span class="dot">•</span>手机信息</div>
						<ul>
							<li>
								<label>型号：</label>
								<span>${model}</span>
							</li>
							<li>
								<label>系统版本：</label>
								<span >${android_version}</span>
							</li>
							<li>
								<label>APP版本：</label>
								<span >${app_version}</span>
							</li>
							<li class="imei">
								<label>IMEI：</label>
								<span >${imei}</span>
							</li>
							<li>
								<label>MID：</label>
								<span >${mid}</span>
							</li>
						</ul>
					</div>
					<div class="basecontent">
						<div class="resultname"><span class="dot">•</span>手机设置</div>
						<ul>
							<li>
								<label>localhost：</label>
								<span >${localhost}</span>
							</li>
							<!--li>
								<label>apn设置：</label>
								<span >${apn}</span>
							</li-->
							
							<li>
								<label>dns列表：</label>
								<span >${dns_list}</span>
							</li>
							<!--li>
								<label>ifconfig信息：</label>
								<span >${ifconfig}</span>
							</li-->
						</ul>
					</div>
				</div>
        	</div>
		</div>
		<div class="baseinfo" ${ping_info_display}>
        	<div class="infocenter">
        		<div class="info-title">
					<div class="title-name">网络连接探测</div>
				</div>
				<div class="info-content">
					<div class="resultname"><span class="dot">•</span>总体丢包率：<span class="${packetloss_color}">${packet_loss}%</span></div>
					<table class="n-table" width="100%" border="0">
		              <tbody>
		                <tr class="error_bg">
		                  <th scope="col" width="30%;">Host</th>
		                  <th scope="col">丢包率</th>
		                  <th scope="col">最大时延</th>
		                  <th scope="col">最小时延</th>
		                  <th scope="col">平均时延</th>
		                </tr>
						${ping_data}
		              </tbody>
		            </table>
				</div>
        	</div>
		</div>
		<div class="baseinfo" ${download_info_display}>
        	<div class="infocenter">
        		<div class="info-title">
					<div class="title-name">下载探测</div>
				</div>
				<div class="info-content">
					${download_data}
				</div>
        	</div>
		</div>
    </div>
</body>
</html>